<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>用户列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">


</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>留资信息</h5>
                    </div>
                    <div class="ibox-content">
                        <hr>
                        <div class="row row-lg">
		                    <div class="col-sm-12">
		                        <!-- Example Card View -->
		                        <div class="example-wrap">
		                            <div class="example">
		                            	<table id="table_list"></table>
		                            </div>
		                        </div>
		                        <!-- End Example Card View -->
		                    </div>
	                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

	<!-- Bootstrap table -->
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <!-- Peity -->
    <script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>

    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

    <!-- 自定义js -->
    <script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function () {
            //初始化表格,动态从服务器加载数据
            $("#table_list").bootstrapTable({
                //使用get请求到服务器获取数据
                method: "POST",
                //必须设置，不然request.getParameter获取不到请求参数
                contentType: "application/x-www-form-urlencoded",
                //获取数据的Servlet地址
                url: "${ctx!}/mg/list",
                //表格显示条纹
                striped: true,
                //启动分页
                pagination: true,
                //每页显示的记录数
                pageSize: 10,
                //当前第几页
                pageNumber: 1,
                //记录数可选列表
                pageList: [5, 10, 15, 20, 25],
                //是否启用查询
                search: true,
                //是否启用详细信息视图
                detailView:true,
                detailFormatter:detailFormatter,
                //表示服务端请求
                sidePagination: "server",
                //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                //设置为limit可以获取limit, offset, search, sort, order
                queryParamsType: "undefined",
                search:true,
                //json数据解析
                responseHandler: function(res) {
                    return {
                        "rows": res.content,
                        "total": res.totalElements
                    };
                },
                //数据列
                columns: [{
                    title: "ID",
                    field: "id",
                    sortable: true
                },{
                    title: "创建时间",
                    field: "createadTime",
                    sortable: true,
                    formatter: function (value, row, index) {
                        return changeDateFormat(value)
                    }
                },{
                    title: "用户名",
                    field: "userName"
                },{
			        title: "留资渠道",
			        field: "sourceType",
			        formatter: function(value, row, index) {
                        if (value == 'award'){

                            return '奖品领取';
                        }if (value == 'Coffee'){

                            return '咖啡领取';
                        }
                        return 'workshop分享';
                    }
			    },{
                    title: "电话",
                    field: "telephone"
                },{
                    title: "购车意向",
                    field: "buyCarTime",
                    formatter: function (value, row, index) {
                        if (value == 'buy_in_one_month') {
                            return '一个月内购买';
                        }
                        if (value == 'buy_in_three_month') {
                            return '三个月内购买';
                        }
                        if (value == 'buy_in_six_month') {
                            return '六个月内购买';
                        }
                        return '暂无购买意向';
                    }
                },{
                    title: "感兴趣的车型",
                    field: "interestCarType"
                }]
            });
            $(".fixed-table-toolbar").empty().append(
                    '<div class="pull-right search"><input class="form-control"  type="button" id="download" value="下载"></div>',
                    '<div class="pull-right search"><input class="form-control"  type="button" id="query" value="查询"></div>',
                    '<div class="pull-right search"><input autocomplete="off" class="form-control" id="endTime" type="text" placeholder="结束时间" layer-date></div>',
                    '<div class="pull-right search"><input autocomplete="off" class="form-control" id="startTime" type="text" placeholder="开始时间" layer-date></div>'
            );
            laydate({
                elem: '#startTime',
                event: 'focus' ,
                format: 'YYYY-MM-DD hh:mm:ss', //日期格式
                istime: true, //是否开启时间选择
                type:'month'
            });
            laydate({
                elem: '#endTime',
                event: 'focus',
                format: 'YYYY-MM-DD hh:mm:ss', //日期格式
                istime: true, //是否开启时间选择
                type:'month'
            });
            $("#query").click(function (){
                var opt = {
                    url:"${ctx!}/mg/list?startTime="+$("#startTime").val()+"&endTime="+$("#endTime").val(),
                    silent:true,
                }
                $("#table_list").bootstrapTable('refresh',opt);
            });
            $("#download").click(function (){
                var form = $("<form>");
                $('body').append(form);
                form.attr('style','display:none');
                form.attr('target','');
                form.attr('method','post');
                form.attr('action','${ctx}/mg/downLoadExcel');//下载文件的请求路径

                //对应查询条件的开始时间
                var input1 = $('<input>');
                input1.attr('type','hidden');
                input1.attr('name','startTime');
                input1.attr('value',$("#startTime").val());
                form.append(input1);

                //对应查询条件的结束时间
                var input2 = $('<input>');
                input2.attr('type','hidden');
                input2.attr('name','endTime');
                input2.attr('value',$("#endTime").val());
                form.append(input2).append('</form>');
                form.submit().remove();
            });
        });

        //转换日期格式(时间戳转换为datetime格式)
        function changeDateFormat(cellval) {
            if(!cellval){
                return "";
            }

            var dateVal = cellval + "";
            if (cellval != null) {
                var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
                var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
                var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

                var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

                return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
            }
        }
        function edit(id){
        	layer.open({
        	      type: 2,
        	      title: '用户修改',
        	      shadeClose: true,
        	      shade: false,
        	      area: ['893px', '600px'],
        	      content: '${ctx!}/admin/user/edit/' + id,
        	      end: function(index){
        	    	  $('#table_list').bootstrapTable("refresh");
       	    	  }
        	    });
        }
        function detailFormatter(index, row) {
	        var html = [];
	        html.push('<p><b>描述:</b> ' + row.description + '</p>');
	        return html.join('');
	    }
    </script>




</body>

</html>
